<template>
    <!--    历史-->
    <div style="margin-top: 100px">
        <div class="section" >
            <el-row>
                <el-col :span="8" v-for="(item,index) in collectList"  :key="index" :offset="index > 0 ? 2 : 0">
                    <el-card :body-style="{ padding: '0px'} " class="card">

<!--                        <img :src="item[0].logo" class="image">-->
                        <div style="padding: 14px;">
                            <div class="bottom clearfix">
                                <P>{{item[0].name}}</P>
                                <time class="time">{{ item[0].addtime}}</time>

                                <el-button type="text" class="button" @click="goplay(item[0].url,item[0].videoid)">
                                    播放
                                </el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

    </div>
</template>

<script>
    import {gethistoryOfUserId,findVideoid,delHistory} from "../api";
    import {mapState} from "vuex"
    import {mapGetters} from "vuex"
    export default {
        name: "History",
        data() {
            return {
                currentDate: new Date(),
                collection:[], //历史视频
                collectList:[] //详情
            };
        },
        computed:{
            ...mapState("user",{
                userId: state=>state.userId
            }),
            ...mapGetters([
                'loginIn',

            ])
        },
        created() {
            this.getCollect(this.userId)
        },

        methods:{
            getCollect(userId){
                gethistoryOfUserId(userId)
                    .then(res=>{
                        this.collection=res.data.histories;

                        for (let i in this.collection){
                            this.getVideoOfIds(this.collection[i].videoid)
                            this.deletehis(this.collection[i].historyid)

                        }

                    })
            },
            getVideoOfIds(videoid){
                findVideoid(videoid)
                    .then((res)=>{
                        this.collectList.push(res.data.findvideo)

                        //this.collectList=res.data.findvideo;
                    })
                    .catch(err=>{
                        console.log(err)
                    })

            },
            deletehis(hisid){
                delHistory(hisid)
                .then((res)=>{
                })

            },

            goplay(url,videoId){

                this.$router.push({path:'/play',query:{videourl: url,videoid:videoId}
                })
            },
        }
    }
</script>

<style scoped>

</style>